<template>
  <el-row class="gqSelTimeSty">
  		<el-col :xs="24" :sm="24" :md="24" :lg="24">
		     <el-select style="width:100px" v-model="timeObj.timeType" @change="changeDay" >
		        <el-option
		        v-for="item in dateList"
		        :key="item.value"
		        :label="item.label"
		        :value="item.value">
		        </el-option>
		     </el-select>
             <div class="dateScope" style="display:inline">
                <el-date-picker size="small" @change="onTime" type="daterange" align="left" unlink-panels start-placeholder="开始日期" end-placeholder="结束日期" style="padding-left:10px" v-model="time" ></el-date-picker>
             </div>
  		</el-col>
  	</el-row>
</template>
<script>
export default {
  data() {
    return {
      dateList: [
        {
          value: 3007,
          label: "本周"
        },
        {
          value: 3008,
          label: "本月"
        },
        {
          value: 3004,
          label: "自定义"
        }
      ],
      time: [],
      timeObj: {
        time: [], // 选择时间
        timeType: 3007
      }
    };
  },
  mounted() {
    this.changeDay(this.timeObj.timeType);
  },
  methods: {
    getTimeScope(res) {
      var days = res[1].getTime() - res[0].getTime();
      return parseInt(days / 1000 / 60 / 60 / 24);
    },
    onTime(res) {
      this.timeObj.time[0] = this.$utils.parseTime(res[0], "{y}-{m}-{d}");
      this.timeObj.time[1] = this.$utils.parseTime(res[1], "{y}-{m}-{d}");
      this.timeObj.timeType = 3004;
      this.$emit("onChangeTime", this.timeObj);
    },
    changeDay(res) {
      var time = [];
      var self = this;
      if (res === 3007) {
        // 本周
        var now = new Date();
        var nowDays = now.getDay() - 1; // 本周的第几天
        if (nowDays === 0) {
          var sundays = 6; // 如果今天是周日
        }
        var sundays = 6 - nowDays; // 周日距离今天的天数（负数表示）
        this.timeObj.time[0] = this.$utils.getDateStr(-nowDays);
        this.timeObj.time[1] = this.$utils.getDateStr(sundays);
        time[0] = this.$utils.formateDate(this.timeObj.time[0]);
        time[1] = this.$utils.formateDate(this.timeObj.time[1]);
      } else if (res === 3008) {
        // 本月数据
        var now = new Date();
        var nowYear = now.getYear();
        nowYear += nowYear < 2000 ? 1900 : 0; //
        var nowMonth = now.getMonth();
        time[0] = new Date(nowYear, nowMonth, 1);
        time[1] = new Date(
          nowYear,
          nowMonth,
          self.$utils.getMonthDays(nowMonth)
        );
        this.timeObj.time[0] = this.$utils.parseTime(time[0], "{y}-{m}-{d}");
        this.timeObj.time[1] = this.$utils.parseTime(time[1], "{y}-{m}-{d}");
      } else if (res == 3011) {
        // 昨天
        this.timeObj.time[0] = this.$utils.getDateStr(-1);
        this.timeObj.time[1] = this.$utils.getDateStr(0);
        time[0] = this.$utils.formateDate(this.timeObj.time[0]);
        time[1] = this.$utils.formateDate(this.timeObj.time[1]);
      } else {
        // 自定义
        this.timeObj.time = [];
      }
      this.$set(this, "time", time);
      this.$emit("onChangeTime", this.timeObj);
    }
  }
};
</script>
<style>
@import "../../styles/element-ui/date/dateScope.css";
.gqSelTimeSty .el-input__inner {
  border: none;
  color: #2ff0d2;
  background: none;
}
.gqSelTimeSty .el-select .el-input .el-select__caret {
  color: #2ff0d2;
}
.el-select-dropdown {
  background-color: rgba(0, 0, 0, 0.5);
}
.el-select-dropdown__list {
  background-color: none;
  background: none;
}
.el-popper .popper__arrow,
.el-popper .popper__arrow::after {
  border-style: none;
}
.el-select-dropdown__item.selected {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
}
.el-select-dropdown__item.selected.hover {
  background-color: #31cee6;
  color: black;
}
.el-input.is-disabled .el-input__inner {
  background: none;
}
</style>
